Skip to content

feat: プロジェクト読み込み時にローディングのぐるぐるを出す様にする #2727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
akikukeo wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat: プロジェクト読み込み時にローディングのぐるぐるを出す様にする #2727

akikukeo wants to merge 8 commits into from

Conversation

@akikukeo
Copy link
Contributor

@akikukeo akikukeo commented Aug 23, 2025

内容

プロジェクト読み込み時にローディングのぐるぐるを出す様にしました。

関連 Issue

#1687

スクリーンショット・動画など

2025-08-24.083032.mp4

その他

EsLintを結構いじっちゃってるのと、UIが思い通りにいかなかったのでDraftです。

@akikukeo
Copy link
Contributor Author

akikukeo commented Aug 24, 2025

voicevox/src/components/EngineStartupOverlay.vue

Lines 1 to 38 in fa7f654

<template>
<!-- TODO: 複数エンジン対応 -->
<!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
<div v-if="allEngineState === 'FAILED_STARTING'" class="waiting-engine">
<div>エンジンの起動に失敗しました。エンジンの再起動をお試しください。</div>
</div>
<div
v-else-if="
!props.isCompletedInitialStartup || allEngineState === 'STARTING'
"
class="waiting-engine"
>
<div>
<QSpinner color="primary" size="2.5rem" />
<div class="q-mt-xs">
{{
allEngineState === "STARTING"
? "エンジン起動中・・・"
: "データ準備中・・・"
}}
</div>
<template v-if="isEngineWaitingLong">
<QSeparator spaced />
エンジン起動に時間がかかっています。<br />
<QBtn
v-if="isMultipleEngine"
outline
:disable="reloadingLocked"
@click="reloadAppWithMultiEngineOffMode"
>
マルチエンジンをオフにして再読み込みする</QBtn
>
<QBtn v-else outline @click="openQa">Q&Aを見る</QBtn>
</template>
</div>
</div>
</template>

のような読み込みのUIにしたいのですが、動画のように点が回っている感じになってしまいます。

voicevox/src/components/ProjectLoadingOverlay.vue

Lines 1 to 8 in fa7f654

<template>
<div v-if="isProjectLoading" class="loading-project">
<div>
<QSpinner color="primary" size="2.5rem" />
<div class="q-mt-xs">プロジェクト読み込み中・・・</div>
</div>
</div>
</template>

うまく実装できなく、どなたかお力をお借りしたいです。

@sevenc-nanashi
Copy link
Member

sevenc-nanashi commented Sep 2, 2025 •
edited
Loading

まだ詳細なプロファイリングができていない（手元に軽いプロジェクトしかない）ので推測ですが。
多分DOM操作とかのJSスレッドを止めるようなものがローディング時間として現れていて、そしてその時間は他のJS（ローディングのぐるぐるの円周の長さを変えるものも含む）が動かないので細いまま回ってると思います。解決策は今のところ思いついてないです…（申し訳ない）

sevenc-nanashi
sevenc-nanashi reviewed Sep 2, 2025
View reviewed changes
Copy link
Member

@sevenc-nanashi sevenc-nanashi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

とりあえず：手元で試してましたが、eslintやas any周りはなくても型エラーは起きなかったので消せるはずです。

@akikukeo
Copy link
Contributor Author

akikukeo commented Sep 6, 2025 •
edited
Loading

image（一部黒塗り）
音声の出力ダイアログを持ってきたら一応動きました。動作がなんか怪しいので修正は必須です。

画像の進捗とパーセンテージが違うのは修正しました。

@akikukeo
Copy link
Contributor Author

akikukeo commented Sep 6, 2025 •
edited
Loading

2025-09-06.212821.mp4

ここまでの進捗です。

@akikukeo akikukeo changed the title WIP:プロジェクト読み込み時にローディングのぐるぐるを出す様にする WIP: feat: プロジェクト読み込み時にローディングのぐるぐるを出す様にする Sep 7, 2025
@voicevox-preview-pages
Copy link

voicevox-preview-pages bot commented Sep 7, 2025 •
edited
Loading

🚀 プレビュー用ページを作成しました 🚀

更新時点でのコミットハッシュ：d2bc9f2

@Hiroshiba
Copy link
Member

Hiroshiba commented Sep 9, 2025

@akikukeo プルリクが完成状態（というよりレビューOkそうな状態）になったらぜひdraftを外し、タイトルからWIPを外していただければ！！

@akikukeo akikukeo changed the title WIP: feat: プロジェクト読み込み時にローディングのぐるぐるを出す様にする feat: プロジェクト読み込み時にローディングのぐるぐるを出す様にする Sep 10, 2025
@akikukeo akikukeo marked this pull request as ready for review September 10, 2025 09:27
@akikukeo akikukeo requested a review from a team as a code owner September 10, 2025 09:27
@akikukeo akikukeo requested review from Hiroshiba and removed request for a team September 10, 2025 09:27
sevenc-nanashi
sevenc-nanashi reviewed Sep 13, 2025
View reviewed changes
Copy link
Member

@sevenc-nanashi sevenc-nanashi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

動作自体は問題なさそうなんですけど、ステータスメッセージと進捗状況（currentとmax）を指定したらいい感じに進捗が出てくれるみたいな共通のを作った方が便利そうな気がしています。確か全音声書き出しも同じような感じだったはずだし、例えばlab書き出しとかもこのプロトコルに乗っけられそう。

@Hiroshiba
Copy link
Member

Hiroshiba commented Oct 2, 2025

ping @sevenc-nanashi

sevenc-nanashi
sevenc-nanashi requested changes Oct 3, 2025
View reviewed changes
Copy link
Member

@sevenc-nanashi sevenc-nanashi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Request Changesの気持ちでした：
#2727 (review)

もし難しそうなら引き継ぎます。

@akikukeo
Copy link
Contributor Author

akikukeo commented Oct 4, 2025

@sevenc-nanashi
何度か自分でも試してみたんですけど、どうにもうまく行かないので諦めます…
お願いします。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sevenc-nanashi sevenc-nanashi sevenc-nanashi requested changes

@Hiroshiba Hiroshiba Awaiting requested review from Hiroshiba Hiroshiba was automatically assigned from VOICEVOX/main-reviewer

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@akikukeo @sevenc-nanashi @Hiroshiba